<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="./img/weixin.ico">

    <!-- Bootstrap core CSS -->
<link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">

  <!-- Optional Bootstrap Theme -->
  <link href="data:text/css;charset=utf-8," data-href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap-theme.min.css" rel="stylesheet" id="bs-theme-stylesheet">

<link href="./css/patch.css" rel="stylesheet">

<!-- Documentation extras -->
<link href="./css/docs.min.css" rel="stylesheet">
<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="./js/ie-emulation-modes-warning.js"></script>

<style type="text/css">
     body{
        font-family: 微软雅黑;
     }
     input{
        line-height:2;
        width: 200px;
        border:1px solid;
        border-radius: 10px;
     }
     th{
      font-size: 24px;
      text-align: center;
     }
    td{
        text-align: center;
        width:33%;
    }
    .num {
      text-align: center;
    }
    h2 {
        margin-top: -135px;
        margin-bottom: 10px;
    }
     #tab{
        border-radius: 25px;
     }
     .sidebar {
        padding-top: 20px;
        font-size: 18px;
}
    #add{
      margin-right: 80px;
    }
 </style>

    </head>
    <body>
<!-- <h2 id="tables-hover-rows">计数列表</h2> -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">微信商家预约互动系统</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="login.html">登陆</a></li>
            <li><a href="#">退出</a></li>
          </ul>
        </div>
      </div>
    </nav>

    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
          <ul class="nav nav-sidebar">
            <li class="active"><a href="#">Overview</a></li>
            <li><a href="http://mewechat.sinaapp.com/wcpd/QueuingHome.php">微信排队叫号</a></li>
            <li><a href="#">微信投票(开发中)</a></li>
            <li><a href="http://mewechat.sinaapp.com/wxscj/counter.html">微信抽奖</a></li>
          </ul>
        </div>
  <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" id="tab-d">
  <h2 id="tables-hover-rows">奖项列表</h2>
   <form action="counter-controller.php" id="counter-form" method="POST">
        <table class="table table-hover table-bordered" id="tab">
            <thead>
                <tr>
                    <th class="span6">奖项名称</th>
                    <th class="span3">数量</th>
                    <th class="span3"><a id="add" class="btn btn-primary" type="button">添加</a><a class="btn btn-danger" id="del-btn" type="button" disabled>删除</a></th>
                    <th id="btn-a"><a id="edit-btn" class="btn btn-primary" type="button">编辑</a></th>
                    
                </tr>
            </thead>
            <tbody>
         <!--        <tr>
                <td colspan="3" style="line-height:300%" id="create">目前还没有任何奖项，你可以点击按钮添加第一个奖项。<button style="margin-left:50px;" type="button" class="btn btn-primary">创建奖项</button></td>
            </tr>  -->
            </tbody>
        </table>
    </form>
  </div>
 </div>
</div>
  <script type='text/javascript' src='http://ajax.useso.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=3.4.2'></script>
  <script type="text/javascript">
        $(document).ready(function(){
            $.ajax({
                type:'POST',
                cache: false,
                url:'./counter-controller.php',
                dataType: 'json',
                success:function(data){
                    if(data != null){
                      /*************************/

                      dataLength = data.length;
                      for(var i = 0; i < dataLength; i++){
                        $("#tab").append('<tr><td class="name">'+data[i].wx_lottery_name+'</td><td class="num" >'+data[i].wx_lottery_num+'</td><td class="rad"><input id="'+data[i].wx_lottery_id+'" type="checkbox"><td></tr>');
                      }
                    }else{
 
                      }
            

        $("#edit-btn").live("click",function(){
            $("#add").attr("disabled","disabled");
            var arr = new Array();

          for(var i = 0; i < dataLength; i++){
             var val = $(".num:eq("+i+")").text();
             arr[i] = val;
             $(".num:eq("+i+")").html("");
             $(".num:eq("+i+")").append('<input style="text-align:center" value="'+arr[i]+'"/>');
          }

          $("#edit-btn").remove();
          $("#btn-a").append('<a class="btn btn-success"  type="button" id="up-btn" href="#">更新</a>');
        })  //end of edit

        $("#up-btn").live("click",function(){
          $("#add").removeAttr("disabled");
          new_arr = {};
          var new_key;
          var new_val;
          for(var j = 0; j < dataLength; j++){
            var new_key = $(".name:eq("+j+")").text();
            var new_val = $(".num:eq("+j+")>input").val();
            new_arr[new_key] = new_val;
            var data = JSON.stringify(new_arr);
            //console.log(new_arr);
            $(".num:eq("+j+")").html("");    
            $(".num:eq("+j+")").append('<td>'+new_arr[new_key]+'</td>');
            
          }


            $.ajax({
              type:'POST',
              cache:false,
              url:'./update.php',
              data:{
                data: data
              },
              success:function(data){
                window.location.reload();
              }
            })

            $("#up-btn").remove();
            $("#btn-a").append('<a class="btn btn-success"  type="button" id="edit-btn" href="#">编辑</a>');
          
        })  //end of up



       
       $(".rad").click(function(){
        $("#del-btn").removeAttr("disabled");
        // var del_arr = new Array();
        // for(var i=0;i<dataLength;i++){
        //   var del_val = $(".rad:eq("+i+")>input[checked]").attr("id");
        //   del_arr[i] = del_val;
        //   }
        //   console.log(del_arr);
         })
           //end of for
        $("#del-btn").click(function(){
              checkid = {};
              var i=0;
               $('table input[type=checkbox]').each(function () {
                  if ($(this).attr("checked")) { 
                      var check_val = $(this).attr("id");
                       checkid[i] = check_val;
                       i++;          
                      $(this).parent().parent().remove(); 
                    }
                  // }
                  })
              var data = JSON.stringify(checkid); 



            $.ajax({
              type:'POST',
              cache:false,
              url:'./del.php',
              data:{
                data: data
              },
              success:function(data){
               window.location.reload();
              }
            })
          })    //end of del
        
  
        $("#add").live("click",function(){
             $("#add").attr("disabled","disabled");
             $("#edit-btn").attr("disabled","disabled");
             $('<tr><td><input style="text-align:center" id="add-name" type="text" placeholder="请输入奖项名称"/></td><td><input style="text-align:center" id="add-num" type="text" placeholder="请输入数量"/></td><td><a class="btn btn-success"  type="button" id="sure" href="#">确定</a></tr>').prependTo($("#tab"));

        })   //end of add

        $("#sure").live("click",function(){
          $("#add").removeAttr("disabled");
          $("#edit-btn").removeAttr("disabled");
           var arr = {};
            arr[0] = $("#add-name").val();
            arr[1] = $("#add-num").val();
            //console.log(arr);
            var data = JSON.stringify(arr);
            // console.log(data);
            $.ajax({
                   type:'POST',
                   cache:false,
                   url:'./add.php',
                   data:{
                    data:data
                   },
                   success:function(data){
                    //console.log(data);
                      window.location.reload();
                   }   //end of success

            })  //end of ajax
         })  //end of sure

       }  //end of success
     })   //end of ajax

  })   //end of ready


  </script>
  </body>
  </html>